<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Hyper Mongo</title>
            </f:facet>
        </h:head>
        <style>
            .ui-widget {
                font-size: 12px;
            }

            .ui-layout-north {                    
                overflow:hidden !important;
            }
        </style>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north"  size="50" resizable="false">
                    <h:form id="tabMenu">
                        <p:tabMenu activeIndex="#{menuBean.currentMenu.id}">  
                            <c:forEach items="#{menuBean.menus}" var="nodeMenu">
                                <p:menuitem value="#{nodeMenu.title}" url="#{nodeMenu.url}" icon="#{nodeMenu.icon}"/>  
                            </c:forEach>
                        </p:tabMenu>  
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="west" size="150" header="Databases" collapsible="true">
                    <h:form id="treeForm">  

                        <p:growl id="messages" showDetail="true" />  
                        <p:contextMenu for="tree">  
                            <p:menuitem value="View" update="messages" actionListener="#{mainController.displayCollection}" icon="ui-icon-search" />  
                            <p:menuitem value="Delete" update="tree" actionListener="#{treeBean.deleteNode}" icon="ui-icon-close"/>  
                        </p:contextMenu>  
                        <p:tree  value="#{mainController.root}" var="node" dynamic="true" cache="false"  
                                 selectionMode="single"  selection="#{mainController.selectedNode}" id="tree">  

                            <p:ajax event="select" update=":treeForm:messages" listener="#{mainController.onNodeSelect}" />   

                            <p:treeNode type="databaseNode" icon="ui-icon-disk">  
                                <h:outputText value="#{node}"/>  
                            </p:treeNode>  
                            <p:treeNode type="collectionNode" icon="ui-icon-note">  
                                <h:outputText value="#{node}"/>  
                            </p:treeNode>  
                        </p:tree>  

                    </h:form>  
                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <h:form id="form">  

                        <p:growl id="messages" showDetail="true" />
                        <h:panelGrid id="grid" columns="3" style="margin-bottom:10px">  
                            <h:outputLabel for="template" value="Console" style="font-weight:bold"/>  
                            <p:inputText id="template" value="#{tableBean.collection.name}" size="50"/>  
                            <p:commandButton id="btn" update="myDatatable" actionListener="#{tableBean.updateColumns}" value="Run" process="@parent"/>  
                        </h:panelGrid>  

                        <h:outputText value="Total Row in Collection : #{tableBean.totalRowCount}" />

                        <p:contextMenu for="myDatatable">  
                            <p:menuitem value="View"  icon="ui-icon-search" oncomplete="PF('dataViewDialog').show()"/>  
                            <p:menuitem value="Edit"  icon="ui-icon-pencil" actionListener="PF('dataViewDialog').show()"/>  
                            <p:menuitem value="Delete" update="myDatatable" icon="ui-icon-close" actionListener="confirmation.show()"/>  
                        </p:contextMenu>  

                        <p:dataTable id="myDatatable" lazy="true" liveResize="true" var="row" value="#{tableBean.values}" draggableColumns="true" paginator="true" rows="15"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15"
                                     rowKey="#{row.uniqueID}"
                                     selection="#{tableBean.selectedDataObject}"
                                     selectionMode="single">  
                            <p:columns value="#{tableBean.columns}" var="column" columnIndexVar="colIndex">
                                <f:facet name="header">  
                                    #{column.header}
                                </f:facet>  
                                #{row.multimap.get(column.header)}
                            </p:columns>
                        </p:dataTable>  

                        <p:dialog dynamic="true" maximizable="true"  minimizable="true" header="Show" widgetVar="dataViewDialog" resizable="false"  id="dialog">  

                            <h:panelGrid id="display">  

                                <f:facet name="header">  
                                    My Header
                                </f:facet>  

                                <p:inputTextarea rows="20" cols="30" autoResize="false" value="#{tableBean.selectedDataObject.orjinalObject}" />                 
                                <!-- 
                                <c:forEach items="#{tableBean.selectedDataObject.multimap}" var="selectedObject">
                                    <h:inputText value="#{selectedObject.key}" />
                                    <h:inputText value="#{selectedObject.value}" />
                                </c:forEach> 
                                -->
                                <f:facet name="footer">

                                    <p:commandButton id="saveButton" value="Save" />         
                                    <p:commandButton id="validateButton" value="Validate"/>    
                                </f:facet>
                            </h:panelGrid>  
                        </p:dialog> 

                        <p:confirmDialog message="Are you sure about destroying the world?"  
                                         showEffect="bounce" hideEffect="explode"  
                                         header="Initiating destroy process" severity="alert" widgetVar="confirmation">  

                            <p:commandButton value="Yes Sure" update="messages" oncomplete="confirmation.hide()"  
                                             actionListener="#{tableBean.deleteDataObject}" />  
                            <p:commandButton value="Not Yet" onclick="confirmation.hide()" type="button" />   

                        </p:confirmDialog>  

                        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">  
                            <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>  
                            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
                        </p:confirmDialog>  
                    </h:form>   
                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>

